import React, { Component } from 'react';
import { connect } from 'react-redux';
import browserCookie from 'browser-cookies';
import { Result, List, WhiteSpace, Modal } from 'antd-mobile';
import { actionCreators } from '../../otherReducer/user';

class User extends Component {
	constructor(props) {
		super(props);
		this.handleLogoutClick = this.handleLogoutClick.bind(this);
	}

    render() {
        const { user } = this.props;
        const Item = List.Item;
		const Brief = Item.Brief;
        return user.user ? (
            <div>
				<Result
					img={<img src={require(`../../statics/avatar/${user.avatar}.png`)} style={{width: 50}} alt="" />}
					title={user.user}
					message={user.type === 'boss' ? user.company : null}
				/>
				
				<List renderHeader={()=>'简介'}>
					<Item
						multipleLine
					>
						{user.title}
						{user.desc.split('\n').map(v => <Brief key={v}>{v}</Brief>)}
						{user.money ? <Brief>薪资:{user.money}</Brief> : null}
					</Item>
					
				</List>
				<WhiteSpace></WhiteSpace>
				<List>
					<Item onClick={this.handleLogoutClick}>退出登录</Item>
				</List>
			</div>
        ) : null
	}
	
	handleLogoutClick() {
		Modal.alert('注销', '确认退出登录吗？', [
		    { text: '取消', onPress: () => console.log('cancel') },
		    { text: '确认', onPress: () => {
		      	browserCookie.erase('userid');
				this.props.handleLogout();
				this.props.history.push('/login');
		    }}
		])
        
    }
}

const mapStateToProps = (state) => ({
	user: state.getIn(['user', 'user'])
})

const mapDispatchToProps = (dispatch) => ({
    handleLogout() {
        dispatch(actionCreators.logout());
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(User);